<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- <div>
            <h3>我是标题<span>---</span></h3>
        </div> -->
        <my-com></my-com>
        <my-comm></my-comm>
    </div>
    ----

    <!-- <div id="app2">
        <my-com></my-com>
        <my-com></my-com>
        <my-com></my-com>
        <my-com></my-com>
        <my-com></my-com>
    </div> -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 全局组件
        const Com = {
            template: "<div><h3>我是标题<span>---{{ msg }}</span></h3></div>",
            // 如果是定义成组件的方式 data属性必须要改写成函数
            data() {
                return {
                    msg: "标题"
                }
            }
        }

        const Com2 = {
            template: "<div><h3>我是新的组件<span>---{{ msg }}</span></h3></div>",
            // 如果是定义成组件的方式 data属性必须要改写成函数
            data() {
                return {
                    msg: "标题222"
                }
            }
        }

        //  Vue.componet(组件名称, 组件内容) 注册全局组件  
        Vue.component("my-com", Com)
        Vue.component("my-comm", Com2)

        new Vue({
            // 元素
            el: "#app"
        })


        // new Vue({
        //     // 元素
        //     el: "#app2"
        // })


        // A 组件  count = 100
        // B 组件  count = 200
        // C 组件  count = 300
        // {
        //     const count = 100
        // }

        // {
        //     const count = 200
        // }

        // {
        //     const count = 300
        // }
    </script>
</body>

</html>